<template>
  <div class="c_recruit_list">
    <div class="sectiona" v-if="isLogin=='true' && jobRecommendListTop.length > 0">
      <p>
        {{$t('recruit.JobConmmond')}}
        <span>{{$t('recruit.JobConmmondDes')}}</span>
      </p>
      <a href="javascript:void(0)" @click="changeType(3,'category','')">{{$t('recruit.JobConmmondMore')}}></a>
    </div>
    <div class="box" v-if="isLogin=='true' && jobRecommendListTop.length > 0">
      <div class="box-item" 
      :key="index"
      v-for="(item,index) in jobRecommendListTop"
      >
        <div class="box-item_top">
          <a :href="'#/vip/c_recruit_detail?id='+item.id" target="_blank">
            <h2 class="np">{{item.positionName}}</h2>
          </a>
          <p class="item_salary">{{item.salaryRangeTxt}}/{{$t('recruit.Month')}}</p>
        </div>
        <el-breadcrumb separator="|" class="breadcrumb-box">
          <el-breadcrumb-item v-if="item.workExperienceTxt!=''">{{item.workExperienceTxt}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="item.educationTxt!=''">{{item.educationTxt}}</el-breadcrumb-item>
          <el-breadcrumb-item v-if="item.vacantTypeTxt!=''">{{item.vacantTypeTxt}}</el-breadcrumb-item>
        </el-breadcrumb>
        <p>
          <span>{{item.enterpriseName}}</span>
          <span>{{item.createTime}}</span>
        </p>
      </div>
    </div>
    <div class="box2 mt20">
      <div class="sectionb">
        <div class="tj-nav">
          <p class="left">
            {{$t('recruit.HotJob')}}：
            <a href="javascript:void(0)" 
            :class="{'active':hotJob==tag}"
            :key="index"
            v-for="(tag,index) in hotJobList"
            @click="changeType(tag,'hotJob','')">{{tag}}</a>
          </p>
          <p class="right">
            <el-badge class="item" :class="{'active':typeId==1}">
              <el-button size="small" @click="changeType(1,'category','')"> {{$t('recruit.JobSearch')}}</el-button>
            </el-badge>
            <el-badge class="item" :class="{'active':typeId==2}">
              <el-button size="small" @click="changeType(2,'category','')"> {{$t('recruit.MyColect')}}</el-button>
            </el-badge>
            <el-badge :value="jobRecommendCount" class="item" :class="{'active':typeId==3}">
              <el-button size="small" @click="changeType(3,'category','')"> {{$t('recruit.JobConmmond')}}</el-button>
            </el-badge>
          </p>
        </div>
        <div class="tj-search">
          <input type="text" name :placeholder="this.$t('recruit.SearchKeword')" v-model="search.keyword"/>
          <button type="button" @click="searchKeyword('')">{{$t('recruit.Search')}}</button>
        </div>
      </div>

      <div class="sectionc">
        <!-- <span v-if="this.filterSumList.length>0">{{$t('recruit.Screen')}}</span>
        <span v-if="this.filterSumList.length>0">{{$t('recruit.Selected')}}：</span>
        
        <el-tag
            :key="index"
            v-for="(tag,index) in filterSumList"
            closable
            @close="handleClose(tag.value,index,tag.text)"
        >{{tag.text}}</el-tag>
        <a href="javascript:void(0)" @click="delFilterList()" v-if="this.filterList.length>0">{{$t('recruit.Empty')}}</a> -->
      </div>
      <div class="sectiond">
        <span class="title">{{$t('recruit.Industry')}}</span>
        <div class="tags" :class="{'hbox':moreStatus1}">
          <el-tag :class="{'active':search.industry==''}" @click.native="changeType('','industry','')">{{$t('recruit.Unlimited')}}</el-tag>
          <el-tag
            :class="{'active':search.industry.indexOf(tag.value)!=-1}"
            :key="index"
            v-for="(tag,index) in industryList"
            @click.native="changeType(tag.value,'industry',tag.text)"
          >{{tag.text}}</el-tag>
        </div>
        <a href="javascript:void(0)" class="more" @click="moreTags(1)">{{$t('recruit.More')}}</a>
      </div>

      <div class="sectiond">
        <span class="title">{{$t('common.company.companyNature')}}</span>
        <div class="tags">
          <el-tag :class="{'active':search.corporateType==''}" @click.native="changeType('','corporateType','')">{{$t('recruit.Unlimited')}}</el-tag>
          
          <el-tag
            :class="{'active':search.corporateType.indexOf(tag.value)!=-1}"
            :key="index"
            v-for="(tag,index) in corporateTypeList"
            @click.native="changeType(tag.value,'corporateType',tag.text)"
          >{{tag.text}}</el-tag>
        </div>
      </div>

      <div class="sectiond">
        <span class="title">{{$t('recruit.SalaryRange')}}</span>
        <div class="tags">
          <el-tag :class="{'active':search.salaryRange==''}" @click.native="changeType('','salaryRange','')">{{$t('recruit.Unlimited')}}</el-tag>
          <el-tag
            :class="{'active':search.salaryRange.indexOf(tag.value)!=-1}"
            :key="index"
            v-for="(tag,index) in salaryRangeList"
            @click.native="changeType(tag.value,'salaryRange',tag.text)"
          >{{tag.text}}</el-tag>
        </div>
      </div>

      <div class="sectiond">
        <span class="title">{{$t('recruit.EducationRequire')}}</span>
        <div class="tags">
          <el-tag :class="{'active':search.education==''}" @click.native="changeType('','education','')">{{$t('recruit.Unlimited')}}</el-tag>
          <el-tag
            :class="{'active':search.education.indexOf(tag.value)!=-1}"
            :key="index"
            v-for="(tag,index) in educationList"
            @click.native="changeType(tag.value,'education',tag.text)"
          >{{tag.text}}</el-tag>
        </div>
      </div>

      <div class="sectiond">
        <span class="title">{{$t('recruit.JobType')}}</span>
        <div class="tags" :class="{'hbox': moreStatus2}">
         <el-tag :class="{'active':search.workType==''}" @click.native="changeType('','workType','')">{{$t('recruit.Unlimited')}}</el-tag>
          
          <el-tag
            :class="{'active':search.workType.indexOf(tag.value)!=-1}"
            :key="index"
            v-for="(tag,index) in workTypeList"
            @click.native="changeType(tag.value,'workType',tag.text)"
          >{{tag.text}}</el-tag>
        </div>
        <a href="javascript:void(0)" class="more" @click="moreTags(2)">{{$t('recruit.More')}}</a>
      </div>

      <div class="sectiond">
        
        <el-checkbox
        :key="index"
        v-for="(tag,index) in vacantTypeList"
             @change="changeType(tag.value,'type',tag.text)">{{tag.text}}</el-checkbox>
        <!-- <el-checkbox v-model="checked" @change="changeType(1,'type')">{{$t('recruit.SocialRecruitment')}}</el-checkbox>
        <el-checkbox @change="changeType(2,'type')">{{$t('recruit.GovernmentRecruitment')}}</el-checkbox>
        <el-checkbox @change="changeType(3,'type')">{{$t('recruit.CampusRecruitment')}}</el-checkbox> -->

      </div>
      <div class="sectiond">
        <p class="hr2"></p>
      </div>
      <div class="sectiond mt10">
        <div class="noRecord" v-if="jobList.length==0 && dataShow">
          <img src="../../assets/images/tip.png">
          <p>{{$t('recruit.NoData')}}~</p>
        </div>
        <div class="sectiond-item" :key="index" v-for="(item,index) in jobList">
          <div class="sectiond-job">
            <a :href="'#/vip/c_recruit_detail?id='+item.id" target="_blank">
              <h2 class="np">{{item.positionName}}</h2>
            </a>
            <p>{{$t('recruit.Education')}}：{{item.educationTxt}}</p>
            <p>
              <a href="javascript:void(0)" @click="addCollect(item.id,index)" v-if="item.isCollected==0 || isLogin=='false'"><img src="../../assets/images/collect.png">{{$t('recruit.PositionCollection')}}</a>
              <a href="javascript:void(0)" @click="cancelCollect(item.id,index)" v-else><img src="../../assets/images/collect_current.png">{{$t('recruit.Collected')}}</a>
            </p>
          </div>
          <div class="sectiond-company" v-if="item.enterpriseResources">
            <h2 class="flex-lect">
              <span class="ntit" style="max-width:270px">{{item.enterpriseResources.enterpriseName}}</span>
              <el-tag v-for="(subItem,subIndex) in item.enterpriseResources.productTagTxt" :key="subIndex">{{subItem}}</el-tag>
            </h2>
            <p>{{item.enterpriseResources.corporateTypeTxt}} <span v-if="item.enterpriseResources.corporateTypeTxt!=''">|</span> {{item.enterpriseResources.staffNumberTxt}} <span v-if="item.enterpriseResources.staffNumber!=''">{{$t('recruit.Above')}}</span> <span v-if="item.enterpriseResources.staffNumber!=''">|</span > <span v-if="item.enterpriseResources.registeredCapital!=''">{{$t('recruit.RegisteredCapital')}}：{{item.enterpriseResources.registeredCapital}}{{$t('recruit.RMB')}}</span></p>
            <p>{{item.vacantTypeTxt}} <span v-if="item.vacantTypeTxt!=''">|</span> <span v-if="item.enterpriseResources.address!=''">{{$t('recruit.Address')}}：{{item.workplace}}</span></p>
          </div>
          <p class="sarlary">{{item.salaryRangeTxt}}/{{$t('common.status.month')}}</p>

          <p class="pulish-date tr">{{item.releaseTime.substr(0,10) }}</p>

          <p class="sub_info" v-if="isPerson">
            <a href="javascrip:void(0)" @click="deliverResume(item.id,index)">{{$t('recruit.ResumeDelivery')}}</a>
          </p>
        </div>

        <p class="record" v-if="pagination.total > 0">{{$t('recruit.Total')}}{{pagination.total}}{{$t('recruit.Records')}} {{$t('recruit.Only')}}{{pagination.current}}/{{Math.ceil(pagination.total/pagination.size) || 0}}{{$t('recruit.Page')}}</p>
      </div>

      <div class="box-center" v-if="pagination.total > 0">
        <el-pagination background  @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-size="pagination.size" layout="prev, pager, next, jumper" :total="pagination.total"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { ajax, showToast, ajaxAdd, isLoginM,jumpRout,ajaxBackAdd } from "@/utils/js.js";
import { corporateTypeList,getPositonPager,hotJob ,jobRecommend,collectJob,deliverResume,addCollect,cancelCollect,getResumeJudge} from "@/services/api.js";

export default {
  data() {
    return {
      dataShow:false,
      filterList: [],
      filterIndustryList:[],
      filterIndustryValList:[],

      filterCTList:[],
      filterCTValList:[],

      filterSRList:[],
      filterSRValList:[],

      filterEList:[],
      filterEValList:[],

      filterWTList:[],
      filterWTValList:[],

      filterSumList:[],
      filterText:'',
      hotJobList: [],
      hotJob:'',
      filterText:'',
      corporateTypeList: [],
      industryList: [],
      salaryRangeList: [],
      educationList: [],
      workTypeList: [],
      vacantTypeList:[],
      jobRecommendList:[],
      jobRecommendListTop:[],
      typeId: 1,
      search_type_list: [1],
      moreStatus1:false,
      moreStatus2:false,
      search: {
        type: "",
        industry: "",
        corporateType: "",
        salaryRange: "",
        education: "",
        workType: "",
        keyword: "",
        status: 1,
        pageNo: 1,
        pageSize: 10,
      },
      checked: true,
      jobList:[],
      pagination:{
        current:0, 
        size:0,
        total:0,
      },
      jobRecommendCount:'',
      isLogin:'false',
      isPerson:true,
    };
  },
  mounted() {
    if(this.$store.state.userInfo){
      this.isLogin='true';
      this.jobRecommendListFuc();
      if(this.$store.state.userInfo.type==0){
        this.isPerson=true;
      }else{
        this.isPerson=false;
      }
    }
    this.content();
  },
  watch: {},
  methods: {
    content() {
      // 热门职位 
      ajax(
        this,
        hotJob,
        {},
        (res) => {
          this.hotJobList = res.data;
        },err=>{
            
          }
      );
      // 所属行业 corporateType
      ajax(this,corporateTypeList,{lxjp: "corporateType",},(res) => {
         this.corporateTypeList = res.data;
        },err=>{

        });
      // 公司性质 industry
      ajax(this,corporateTypeList,{lxjp: "industry",},(res) => {
        this.industryList = res.data;
      },err=>{

      });
      // 薪资范围 salaryRange
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "salaryRange",
        },
        (res) => {
          this.salaryRangeList = res.data;
        },err=>{

      }
      );
      // 学历要求 education
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "education",
        },
        (res) => {
          this.educationList = res.data;
        },err=>{

      }
      );
      // 工作类型 workType
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "workType",
        },
        (res) => {
          this.workTypeList = res.data;
        },err=>{

      }
      );
       // 招聘类型 vacantType
      ajax(
        this,
        corporateTypeList,
        {
          lxjp: "vacantType",
        },
        (res) => {
          this.vacantTypeList = res.data;
        },err=>{

      }
      );
      
      this.getContentList();
    },
    navTo(url){
      jumpRout(this,url,{},(d)=>{})
    },
    jobRecommendListFuc(){
      // 所属行业 corporateType
      ajaxAdd(
        this,
        jobRecommend,
        {},
        (res) => {
          this.getPagination(res)
          if(res.data){
            for(var i=0;i<res.data.records.length;i++){
              var item =res.data.records;
              if(item[i].enterpriseResources && item[i].enterpriseResources.lengt>0){
                item[i].enterpriseResources.productTagTxt=item[i].enterpriseResources.productTagTxt.split(',');
              }else{
                item[i].enterpriseResources.productTagTxt = []
              }
            }
            this.jobList=res.data.records;
            this.jobRecommendListTop = res.data.records.slice(0,3);

            this.jobRecommendCount=this.pagination.total;
            this.dataShow = true 
          }else{
            this.jobList = [];
            this.dataShow = true;
            this.jobRecommendCount='';
            // showToast(this,this.$t('recruit.JobConmmond')+" "+this.$t('recruit.NoData'),0);
          }
        },err=>{

        }
      );
    },
    getPagination(res){
      if(res.data){
        setTimeout(() => {
          this.search.pageNo=res.data.current;
          this.pagination={
            current:res.data.current,
            size:res.data.size,
            total:res.data.total,
          };
        }, 500)
      }else{
        setTimeout(() => {
          this.search.pageNo=1;
          this.pagination={
            current:1,
            size:10,
            total:0,
          };
        }, 500)
      }
    },
    getCollectList(){
      isLoginM(this,()=>{
        ajaxAdd(this,collectJob,this.search,(res) => {
            
            this.getPagination(res)
            for(var i=0;i<res.data.records.length;i++){
              var item =res.data.records;
              if(item[i].enterpriseResources && item[i].enterpriseResources.lengt>0){
                item[i].enterpriseResources.productTagTxt=item[i].enterpriseResources.productTagTxt.split(',');
              }else{
                item[i].enterpriseResources.productTagTxt = []
              }
            }

            this.jobList = res.data.records;
            
            this.dataShow = true
          },err=>{

          });
      })
      
    },
    handleClose(num,index,val) {
      if(this.filterSumList[index].type=="workType"){
        this.search.workType="";
      }else if(this.filterSumList[index].type=="industry"){
        var exist =false;
        var existIndex = 0;
        for(var i=0;i<this.filterIndustryList.length;i++){
          if(this.filterIndustryList[i].text==val){
            exist=true; 
            existIndex = i; 
          }
        }
        this.filterIndustryList.splice(existIndex,1);
        this.filterIndustryValList.splice(existIndex,1);
        this.search.industry= this.filterIndustryValList.join(',');
        this.filterSumList=this.filterIndustryList.concat(this.filterList);

      }else if(this.filterSumList[index].type=="corporateType"){
        this.search.corporateType="";
      }else if(this.filterSumList[index].type=="salaryRange"){
        this.search.salaryRange="";
      }else if(this.filterSumList[index].type=="education"){
        this.search.education="";
      }

      if(this.filterSumList[index].type!="industry"){
          var exist =false;
          var existIndex = 0;
          for(var i=0;i<this.filterList.length;i++){
            if(this.filterList[i].text==val){
              exist=true; 
              existIndex = i; 
            }
          }
          this.filterList.splice(existIndex,1);
          this.filterSumList.splice(index,1);
      }
     
      this.getContentList();
    },
    addCollect(id,index){
      if(this.isLogin=='false'){
          showToast(this,this.$t('common.login.login'),0);
      }else{
        // 所属行业 corporateType
        ajaxAdd(this,addCollect,{jobId:id},(res) => {
            showToast(this,res.msg,1);
            this.jobList[index].isCollected=1;
        },err=>{
          
        });
      }
      
    },
    cancelCollect(id,index){
      if(this.isLogin=='false'){
          showToast(this,this.$t('common.login.goLogin'),0);
      }else{
        isLoginM(this,()=>{
          ajaxBackAdd(this, cancelCollect,{jobId:id},(res) => {
              showToast(this,res.msg,1);
              this.jobList[index].isCollected=0;
              //this.jobList = this.jobList.filter( n=> n.id !=id)
            },err=>{
          }
          );
        })
      }
      
    },
    deliverResume(id){
      if(this.isLogin=='false'){
          showToast(this,this.$t('common.login.goLogin'),0);
      }else{
        if (this.$store.state.userInfo.type != 0) {
          showToast(this, this.$t("recruit.QyResumeDeliveryTips"), 0);

          return false;
        } 
        this.resumeJudge(id);
      }
    },
    resumeJudge(id){
      ajax(
        this,
        getResumeJudge,
        {},
        (res) => {
          if(res.data){
            ajaxAdd(
              this,
              deliverResume,
              {
                jobId:id
              },
              (res) => {
                showToast(this, res.msg,1);
              },
              (error) => {
              },
            );
          }else{
            this.$confirm(res.msg, this.$t('recruit.Tips'), {
              confirmButtonText: this.$t('recruit.GoPerfect'),
              cancelButtonText: this.$t('recruit.Cancel'),
              type: 'warning'
            }).then(() => {
                this.navTo("/vip/p_resume_edit");
            }).catch(() => {
            });
          }
        },
        (error) => {
        },
      );
    },
    getContentList(){
      console.log(this.search);
      //职位搜索列表
      ajaxAdd(
        this,
        getPositonPager,
        this.search,
        (res) => {
          this.getPagination(res)
          for(var i=0;i<res.data.records.length;i++){
            var item =res.data.records;
            if(item[i].enterpriseResources && item[i].enterpriseResources.lengt>0){
               item[i].enterpriseResources.productTagTxt=item[i].enterpriseResources.productTagTxt.split(',');
            }else{
              item[i].enterpriseResources.productTagTxt = []
            }
          }
          this.jobList=res.data.records;
          this.dataShow = true
        },err=>{
            
          }
      );
    },
    searchKeyword(keyword){
        if(keyword!=''){
          this.search.keyword=keyword;
          this.getContentList();
        }else{
          this.getContentList();
        }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.search.pageNo=val;
      if(this.typeId == 1){
        this.getContentList();
      }else if(this.typeId == 2){
        this.getCollectList();
      }else if(this.typeId == 3){
        this.jobRecommendListFuc();
      }

    },
    changeType(num, type,text) {
      // this.jobList = [];
      // this.dataShow=false;
      this.getPagination('');
      if (type == "category") {
        this.typeId = num;
        if(num!=1 && this.isLogin=="false"){
          showToast(this,this.$t('common.login.login'),0);
          return false;
        }
        if(num==2){
            this.getCollectList();
        }else if(num==3){
            this.jobRecommendListFuc();
        }else{
          this.getContentList();
        }
      } else if (type == "type") {
        if (this.search_type_list.indexOf(num) > -1) {
          this.search_type_list.splice(this.search_type_list.indexOf(num), 1);
          this.search.type = this.search_type_list.join(",");
        } else {
          this.search_type_list.push(num);
          this.search.type = this.search_type_list.join(",");
        }
        this.getContentList();
      } else if (type == "industry") {
        //this.search.industry = num;
        this.search.pageNo = 1;

        var exist =false;
        var existIndex = 0;
        if(num=='' && text==''){
          this.search.industry='';
          this.filterSumList=this.filterList;
          this.filterIndustryList=[];
          this.filterIndustryValList=[];
        }else{
          for(var i=0;i<this.filterIndustryList.length;i++){
            if(this.filterIndustryList[i].text==text){
              exist=true; 
              existIndex = i; 
            }
          }

          if(exist==true && text!=''){
            this.filterIndustryList.splice(existIndex,1);
            this.filterIndustryValList.splice(existIndex,1);
          }else if(exist==false && text!=''){

            if(this.filterIndustryValList.length >9){
                showToast(this, this.$t("recruit.IndustryTips"));

                return false;
            }

            var jsonObj={
              value:num,
              text:text,
              type:'industry'
            }
            this.filterIndustryList.push(jsonObj);
            this.filterIndustryValList.push(num);
          }

          this.search.industry= this.filterIndustryValList.join(',');
          this.filterSumList=this.filterIndustryList.concat(this.filterList);
        }
        this.getContentList();
      } else if (type == "corporateType") {
        this.search.pageNo = 1;
        var exist =false;
        var existIndex = 0;
        if(num=='' && text==''){
          this.search.corporateType='';
          this.filterSumList=this.filterList;
          this.filterCTList=[];
          this.filterCTValList=[];
        }else{
          for(var i=0;i<this.filterCTList.length;i++){
            if(this.filterCTList[i].text==text){
              exist=true; 
              existIndex = i; 
            }
          }

          if(exist==true && text!=''){
            this.filterCTList.splice(existIndex,1);
            this.filterCTValList.splice(existIndex,1);
          }else if(exist==false && text!=''){
            // if(this.filterCTValList.length >9){
            //     showToast(this, this.$t("recruit.IndustryTips"));

            //     return false;
            // }
            var jsonObj={
              value:num,
              text:text,
              type:'corporateType'
            }
            this.filterCTList.push(jsonObj);
            this.filterCTValList.push(num);
          }

          this.search.corporateType= this.filterCTValList.join(',');
          this.filterSumList=this.filterCTList.concat(this.filterList);
        }

        this.getContentList();
      } else if (type == "salaryRange") {
        this.search.pageNo = 1;
        var exist =false;
        var existIndex = 0;
        if(num=='' && text==''){
          this.search.salaryRange='';
          this.filterSumList=this.filterList;
          this.filterSRList=[];
          this.filterSRValList=[];
        }else{
          for(var i=0;i<this.filterSRList.length;i++){
            if(this.filterSRList[i].text==text){
              exist=true; 
              existIndex = i; 
            }
          }
          if(exist==true && text!=''){
            this.filterSRList.splice(existIndex,1);
            this.filterSRValList.splice(existIndex,1);
          }else if(exist==false && text!=''){

            // if(this.filterSRValList.length >9){
            //     showToast(this, this.$t("recruit.IndustryTips"));
            //     return false;
            // }

            var jsonObj={
              value:num,
              text:text,
              type:'salaryRange'
            }
            this.filterSRList.push(jsonObj);
            this.filterSRValList.push(num);
          }

          this.search.salaryRange= this.filterSRValList.join(',');
          this.filterSumList=this.filterSRList.concat(this.filterList);
        }
        
        this.getContentList();
      } else if (type == "education") {

        this.search.pageNo = 1;

        var exist =false;
        var existIndex = 0;
        if(num=='' && text==''){
          this.search.education='';
          this.filterSumList=this.filterList;
          this.filterEList=[];
          this.filterEValList=[];
        }else{
          for(var i=0;i<this.filterEList.length;i++){
            if(this.filterEList[i].text==text){
              exist=true; 
              existIndex = i; 
            }
          }

          if(exist==true && text!=''){
            this.filterEList.splice(existIndex,1);
            this.filterEValList.splice(existIndex,1);
          }else if(exist==false && text!=''){

            // if(this.filterEValList.length >9){
            //     showToast(this, this.$t("recruit.IndustryTips"));

            //     return false;
            // }

            var jsonObj={
              value:num,
              text:text,
              type:'education'
            }
            this.filterEList.push(jsonObj);
            this.filterEValList.push(num);
          }

          this.search.education= this.filterEValList.join(',');
          this.filterSumList=this.filterEList.concat(this.filterList);
        }

        this.getContentList();
      } else if (type == "workType") {

        this.search.pageNo = 1;

        var exist =false;
        var existIndex = 0;
        if(num=='' && text==''){
          this.search.workType='';
          this.filterSumList=this.filterList;
          this.filterWTList=[];
          this.filterWTValList=[];
        }else{
          for(var i=0;i<this.filterWTList.length;i++){
            if(this.filterWTList[i].text==text){
              exist=true; 
              existIndex = i; 
            }
          }

          if(exist==true && text!=''){
            this.filterWTList.splice(existIndex,1);
            this.filterWTValList.splice(existIndex,1);
          }else if(exist==false && text!=''){

            // if(this.filterWTValList.length >9){
            //     showToast(this, this.$t("recruit.IndustryTips"));

            //     return false;
            // }

            var jsonObj={
              value:num,
              text:text,
              type:'workType'
            }
            this.filterWTList.push(jsonObj);
            this.filterWTValList.push(num);
          }

          this.search.workType= this.filterWTValList.join(',');
          this.filterSumList=this.filterWTList.concat(this.filterList);
        }

        this.getContentList();
      } else if (type == "filter") {
        this.filterText = num;

      }else if (type == "hotJob") {
        if(num==this.search.keyword){
           this.hotJob = '';
           this.search.keyword='';
           this.searchKeyword(''); 
        }else{
           this.hotJob = num;
          this.searchKeyword(num);
        }
      }
     
    },
    delFilterList(){
       this.search= {
          type: "1",
          industry: "",
          corporateType: "",
          salaryRange: "",
          education: "",
          workType: "",
          keyword: "",
          status: 1,
          pageNo: 1,
          pageSize: 10,
      };
      this.filterList=[];
      this.filterIndustryList=[];
      this.filterIndustryValList=[];
      this.filterSumList=[];
      this.filterText="";
      if(this.typeId == 1){
        this.getContentList();
      }else if(this.typeId == 2){
        this.getCollectList();
      }else if(this.typeId == 3){
        this.jobRecommendListFuc();
      }
    },
    moreTags(num){
      if(num==1){
        this.moreStatus1=!this.moreStatus1;
      }else if(num==2){
        this.moreStatus2=!this.moreStatus2;
      }
      
    }
  },
};
</script>
<style lang="scss">
.hbox{
  height: auto!important;
}
.mt20 {
  margin-top: 20px;
}
.mt40 {
  margin-top: 40px !important;
}
.mb40 {
  margin-bottom: 40px !important;
}
.mb10 {
  margin-bottom: 10px !important;
}
.box-center {
  margin: 0 auto;
  text-align: center;
}
.c_recruit_list {
  .noRecord{
    text-align: center;
    padding:100px 0;
    p{
      font-size:16px;
      font-family:Microsoft YaHei;
      font-weight:400;
      margin-top: 30px;
      color:rgba(102,102,102,1);
      opacity:1;
    }
  }
  width: 1200px;
  box-sizing: border-box;
  margin: 10px auto;
  .sectiona {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin: 15px 0;
    p {
      border-left: 3px solid #0f54bc;
      padding-left: 5px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 24px;
      color: rgba(51, 51, 51, 1);
      opacity: 1;
      span {
        margin-left: 5px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(136, 136, 136, 1);
        opacity: 1;
      }
    }
    a {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 19px;
      color: rgba(102, 102, 102, 1);
      opacity: 1;
    }
  }
  .box {
    padding: 24px 15px;
    box-sizing: border-box;
    background: #ffffff;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    .box-item {
      width: 380px;
      height: 135px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 20px rgba(15, 84, 188, 0.16);
      opacity: 1;
      padding: 19px 17px;
      box-sizing: border-box;
      border-radius: 5px;
      .box-item_top {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        margin-bottom: 10px;
        h2 {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 21px;
          color: rgba(15, 84, 188, 1);
          opacity: 1;
        }
        p.item_salary {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 21px;
          color: rgba(255, 116, 82, 1);
          opacity: 1;
        }
      }
      .breadcrumb-box {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(51, 51, 51, 1);
        opacity: 1;
        margin-bottom: 30px;
      }
      p {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(153, 153, 153, 1);
        opacity: 1;
      }
    }
  }
  .box2 {
    padding: 24px 15px;
    box-sizing: border-box;
    background: #ffffff;
    .sectionb {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      .tj-nav {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: calc(100% - 254px);
        box-sizing: border-box;
        .left {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 36px;
          color: rgba(102, 102, 102, 1);
          opacity: 1;

          a {
            margin: 0 10px;
          }
          a.active {
            color: rgba(15, 84, 188, 1);
          }
        }
        .right {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 19px;

          opacity: 1;
          .el-button {
            padding: 0;
            border: none;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            opacity: 1;
          }
          .item {
            color: #666666;
            margin: 0 10px;
            padding: 5px 5px 10px 5px;
          }
          .item.active {
            color: rgba(15, 84, 188, 1);
            border-bottom: 2px solid rgba(15, 84, 188, 1);
          }
          margin-right: 40px;
        }
      }

      .tj-search {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 254px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(204, 204, 204, 1);
        box-sizing: border-box;
        opacity: 1;
        border-radius: 2px;
        border-radius: 0 5px 5px 0;
        input {
          width: 100%;
          height: 100%;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          opacity: 1;
          border: none;
          padding: 5px;
          box-sizing: border-box;
        }
        button {
          width: 47px;
          height: 34px;
          background: rgba(15, 84, 188, 1);
          border: 1px solid rgba(38, 163, 247, 1);
          opacity: 1;
          border-radius: 0px 2px 2px 0px;
          line-height: 34px;
          border: none;
          outline: none;
          color: #fff;
          border-radius: 0 5px 5px 0;
        }
      }
    }
    .sectionc {
      margin-top: 20px;
      padding: 20px 0;
      border-top: 1px solid rgba(234, 238, 237, 1);
      .el-tag {
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(205, 209, 212, 1);
        opacity: 1;
        border-radius: 2px;
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
        margin: 0 5px;
        cursor: pointer;
      }
      .el-tag.active {
        border: 1px solid rgba(15, 84, 188, 1);
        color: rgba(15, 84, 188, 1);
        background: #fff;
      }
      span:first-child {
        display: inline-block;
        width: 97px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
      }
      span:last-child {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
      }
      a {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(102, 102, 102, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
        margin-left: 15px;
      }
    }

    .sectiond {
      width: 100%;
      position: relative;
      // padding:10px 0;
      display: inline-block;
      .title {
        width: 97px;
        display: inline-block;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
        float: left;
      }
      div.tags {
        width: calc(100% - 200px);
        float: left;
        height: 32px;
        overflow: hidden;
        .el-tag {
          // width:44px;
          height: 22px;
          border: none;
          opacity: 1;
          border-radius: 2px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
          text-stroke: 1 rgba(0, 0, 0, 0);
          background: none;
          opacity: 1;
          cursor: pointer;
          margin: 0px 3px 10px 3px;
        }
        .el-tag.active {
          border: 1px solid rgba(15, 84, 188, 1);
          color: rgba(15, 84, 188, 1);
          background: #fff;
        }
      }
      div.tags::after {
        width: 100%;
        height: 0px;
        clear: both;
        content: "";
      }

      a.more {
        margin-left: 15px;
        position: absolute;
        right: 0;
        // top: 14px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: rgba(102, 102, 102, 1);
        -webkit-text-stroke: 1 rgba(0, 0, 0, 0);
        text-stroke: 1 rgba(0, 0, 0, 0);
        opacity: 1;
        margin-top: 4px;
      }
      .hr2 {
        background: rgba(204, 204, 204, 0.3);
        width: 100%;
        height: 2px;
      }
      .record {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        opacity: 1;
        line-height: 40px;
        margin-bottom: 20px;
      }
      .sectiond-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 0;
        border-bottom: 1px solid rgba(204, 204, 204, 0.3);
        
        .sectiond-job {
          width: 20%;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: flex-start;
          a:hover{
            text-decoration: underline #0f54bc;
          }
          h2 {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(15, 84, 188, 1);
            opacity: 1;
            margin-bottom: 9px;
            width:175px;
          }
          p {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            opacity: 1;
            margin-bottom: 9px;
            a {
              color: rgba(102, 102, 102, 1);
              img{
                width: 14px;
                margin-right: 5px;
              }
            }
          }
        }
        .sectiond-company {
          width: 40%;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: space-between;
          a:hover{
            text-decoration: underline #0f54bc;
          }
          h2 {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(15, 84, 188, 1);
            opacity: 1;
            margin-bottom: 9px;
            .el-tag {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(15, 84, 188, 1);
              height: 20px;
              line-height: 20px;
              margin-right: 5px;
              background: rgba(15, 84, 188, 0.05);
              border-radius: 2px;
            }
          }
          p {
            margin-bottom: 9px;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            opacity: 1;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
          }
        }
        .sarlary {
          width: 15%;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(246, 66, 66, 1);
          opacity: 1;
          align-self: center;
          text-align: center;
        }
        .pulish-date {
          width: 15%;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          opacity: 1;
          align-self: center;
        }
        .sub_info {
          width: 10%;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          opacity: 1;
          align-self: center;
          text-align: center;
        }
        .sub_info.active {
          color: rgba(15, 84, 188, 1);
        }
      }
    }
  }
}
</style>
